<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Plotly数据可视化</title>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 20px;
        }
        .container {
            background-color: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            width: 90%;
            max-width: 1000px;
            margin: 0 auto;
        }
        h2 {
            text-align: center;
            color: #333;
            margin-bottom: 25px;
        }
        .chart-container {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        .controls {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 20px;
        }
        .input-group {
            display: flex;
            flex-direction: column;
            flex: 1;
            min-width: 120px;
        }
        label {
            margin-bottom: 5px;
            font-weight: bold;
            color: #555;
        }
        input {
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        button {
            padding: 10px 15px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        button:hover {
            background-color: #45a049;
        }
        #plotlyChart {
            width: 100%;
            height: 400px;
        }
        .message {
            margin-top: 10px;
            padding: 10px;
            border-radius: 4px;
            text-align: center;
            display: none;
        }
        .error {
            background-color: #ffebee;
            color: #c62828;
            border: 1px solid #ef9a9a;
        }
        .success {
            background-color: #e8f5e9;
            color: #2e7d32;
            border: 1px solid #a5d6a7;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>Plotly数据可视化</h2>
        
        <div class="chart-container">
            <div class="controls">
                <div class="input-group">
                    <label for="xValue">X值</label>
                    <input type="number" id="xValue" placeholder="输入X值">
                </div>
                <div class="input-group">
                    <label for="yValue">Y值</label>
                    <input type="number" id="yValue" placeholder="输入Y值">
                </div>
                <div class="input-group" style="justify-content: flex-end;">
                    <button onclick="addDataPoint()">添加数据点</button>
                </div>
            </div>
            
            <div id="plotlyChart"></div>
            
            <div id="message" class="message"></div>
        </div>
    </div>

    <script>
        // 初始数据
        const initialData = {
            x: [1, 2, 3, 4, 5],
            y: [10, 15, 13, 17, 20]
        };
        
        // 初始化图表
        function initPlot() {
            const data = [{
                x: initialData.x,
                y: initialData.y,
                mode: 'markers+lines',
                type: 'scatter',
                name: '数据点',
                marker: {
                    size: 12,
                    color: 'rgb(55, 128, 191)',
                    line: {
                        color: 'rgb(55, 128, 191)',
                        width: 0.5
                    }
                }
            }];
            
            const layout = {
                title: '自定义数据可视化',
                xaxis: {
                    title: 'X轴'
                },
                yaxis: {
                    title: 'Y轴'
                },
                margin: {
                    l: 50,
                    r: 50,
                    b: 50,
                    t: 50,
                    pad: 4
                }
            };
            
            Plotly.newPlot('plotlyChart', data, layout);
        }
        
        // 添加数据点
        function addDataPoint() {
            const xValue = document.getElementById('xValue').value;
            const yValue = document.getElementById('yValue').value;
            
            if (xValue === '' || yValue === '') {
                showMessage('请输入X值和Y值', 'error');
                return;
            }
            
            const x = parseFloat(xValue);
            const y = parseFloat(yValue);
            
            if (isNaN(x) || isNaN(y)) {
                showMessage('请输入有效的数字', 'error');
                return;
            }
            
            // 获取当前图表数据
            const chartData = JSON.parse(JSON.stringify(initialData));
            
            // 添加新数据点
            chartData.x.push(x);
            chartData.y.push(y);
            
            // 更新图表
            Plotly.update('plotlyChart', {
                x: [chartData.x],
                y: [chartData.y]
            });
            
            // 清空输入框
            document.getElementById('xValue').value = '';
            document.getElementById('yValue').value = '';
            
            showMessage('数据点已添加', 'success');
        }
        
        // 显示消息函数
        function showMessage(message, type) {
            const messageElement = document.getElementById('message');
            messageElement.textContent = message;
            messageElement.className = 'message ' + type;
            messageElement.style.display = 'block';
            
            // 3秒后自动隐藏消息
            setTimeout(() => {
                messageElement.style.display = 'none';
            }, 3000);
        }
        
        // 页面加载完成后初始化图表
        window.onload = initPlot;
    </script>
</body>
</html>
